<template>
    <view class="login-wrap">
        <van-button class="login-btn"
                    size="normal"
                    round
                    type="primary"
                    open-type="getUserInfo"
                    @getuserinfo="getUserInfo"
                    :lang="'zh_CN'"
                    with-credentials>
            微信一键登录
        </van-button>
        <scroll-view style="background: #fff; padding: 15px; height: 500px" scroll-x scroll-y>
            <text selectable>{{uf}}</text>
        </scroll-view>
    </view>
</template>

<config>
    {
    navigationBarTitleText: '登录测试',
    navigationBarTextStyle: 'white',
    navigationBarBackgroundColor: '#476888',
    }
</config>

<script>
  import AppWrapper from "@/components/app-wrap";

  export default {
    name: "login",
    components: {AppWrapper},
    data() {
      return {
        uf: null,
        code: ""
      }
    },
    computed: {
      from() {
        return decodeURIComponent(this.$mp.query.from)
      }
    },
    methods: {
      getUserInfo(data) {
        console.log('第一次的userInfo', data.detail)
        wx.login({
          success: ({code}) => {
            this.code = code;
            wx.getUserInfo({
              withCredentials: true,
              lang: "zh_CN",
              success: (data) => {
                this.uf = "[code:" + this.code + "]________" + JSON.stringify(data);
                console.log('第二次的userInfo', data)
                wx.setClipboardData({
                  data: this.uf
                })
              },
              fail: (data) => {
                console.log('fail', data);
              }
            });

          }
        })

      },
    },
    mounted() {
    }
  }
</script>

<style lang="less">
    .login-wrap {
        width: 100vw;
        height: 100vh;
        position: relative;
        background-color: #476888;
        overflow: hidden;

        .bg {
            position: absolute;
            width: 100vw;
            height: 100vh;
            left: 0;
            top: 0;
        }

        .logo {
            margin: 150px auto 183px auto;
            position: relative;
            display: block;
            width: image-width("../static/images/logo.png");
            height: image-height("../static/images/logo.png");
        }

        .login-btn {
            .van-button {
                color: rgba(0, 47, 95, 1);
                display: block;
                width: 678px;
                height: 96px;
                line-height: 94px;
                background: rgba(255, 255, 255, 1);
                opacity: 1;
                border-radius: 60px;
                margin: auto;
                font-size: 32px;
                font-weight: 400;
            }

            .icon-wechat {
                width: 44px;
                transform: translateY(.2em);
            }
        }
    }
</style>
